
import { Modal, Tag } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './style.less';

export default function Keyboard(props: any) {
    const { modalParams, customPaletteRef } = props;

    return (
        <Modal
            {...modalParams}
            title='快捷键'
            mask={false}
            maskClosable={true}
            centered={false}
            bodyStyle={{
                padding: '0 20px 20px',
            }}
            isMove={false}
            style={{
                left: customPaletteRef?.current?.paletteVisiable ? -342 : -474,
                top: 88,
            }}
        >
            <div className='process-designer-keyboard-item-wrapper'>
                <div>画布缩放</div>
                <div>鼠标滚轮</div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>空间工具</div>
                <div><Tag>s</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>套索工具</div>
                <div><Tag>l</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>连接线工具<ExclamationCircleOutlined title='先点击c再点击需要连接的两个节点元素' /></div>
                <div><Tag>c</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>全选</div>
                <div><Tag>ctrl</Tag> + <Tag>a</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>撤回</div>
                <div><Tag>ctrl</Tag> + <Tag>z</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>复制</div>
                <div><Tag>ctrl</Tag> + <Tag>c</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>粘贴</div>
                <div><Tag>ctrl</Tag> + <Tag>v</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>剪切</div>
                <div><Tag>ctrl</Tag> + <Tag>x</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>搜索节点元素<ExclamationCircleOutlined title='按节点id或名称搜索' /></div>
                <div><Tag>ctrl</Tag> + <Tag>f</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>选中节点元素后移动</div>
                <div><Tag>↑</Tag> <Tag>→</Tag> <Tag>↓</Tag> <Tag>←</Tag></div>
            </div>
            <div className='process-designer-keyboard-item-wrapper'>
                <div>恢复</div>
                <div><Tag>ctrl</Tag> + <Tag>shift</Tag> + <Tag>z</Tag></div>
            </div>
        </Modal>
    )
}